import React, { useState, useCallback } from 'react'
import PropTypes from 'prop-types'
import { Row, Col, Divider, Button, Icon } from 'antd'
import './Sample.less'
import FieldSample from './sampleModule/FieldSample'
import StyleSample from './sampleModule/StyleSample'

export default function Sample(props) {
  const [styles, setStyles] = useState({});
  const [prepareStyles, setPrepareStyles] = useState({});
  const onChange = useCallback(s => {
    setPrepareStyles(s);
  }, []);
  const onClick = useCallback(() => {
    setStyles(prepareStyles);
  }, [prepareStyles]);
  return (
    <Row className={`compute-desc compute-desc-${props.state}`}>
      <Row>
        <Divider orientation="left">
          {`<div class="parent"><h1 class="test">Lorem</h1></div>`}
        </Divider>
      </Row>
      <Row>
        <Col span={6} className="desc-content desc-content-left">
          <Divider orientation="left">
            h1 元素的 CSS 属性值
          </Divider>
          <FieldSample styles={ styles } current={ props.current }/>
        </Col>
        {/* 穿梭按钮 */}
        <Col span={1} className="desc-content desc-content-center">
          <Button type="primary" className="desc-content-btn" onClick={onClick}>
            <Icon type="left"/>
          </Button>
          {/* <Button type="primary" className="desc-content-btn">
            <Icon type="right"/>
          </Button> */}
        </Col>
        <Col span={17} className="desc-content desc-content-right">
          <Divider orientation="left">
            备选样式列表
          </Divider>
          <StyleSample current={ props.current } onChange={onChange}/>
        </Col>
      </Row>
    </Row>
  );
}

Sample.propTypes = {
  state: PropTypes.string.isRequired,
  current: PropTypes.number.isRequired
};
